<template>
  <div>
    <!-- title -->
    <PageTitle>
      {{ $t("menu.M_10400408") }}
    </PageTitle>
    <!-- Table model -->
    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      :page-size="pageSize"
      :total="totalPage"
      :current-page="pageIndex"
      @current-change="currentChangeHandle"
    >
      <el-form class="p-4" inline @submit.prevent.native>
        <el-form-item>
          <el-input
            v-model="developerName"
            :maxlength="16"
            show-word-limit
            :placeholder="$t('developer.debug_device.developer_name')"
            clearable
            @blur="() => (developerName = developerName.trim())"
            @keyup.enter.native="search((pageIndex = 1))"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="devSn"
            :maxlength="32"
            show-word-limit
            :placeholder="$t('developer.debug_device.dev_sn')"
            clearable
            @blur="() => (devSn = devSn.trim())"
            @keyup.enter.native="search((pageIndex = 1))"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="modelCode"
            :maxlength="16"
            show-word-limit
            :placeholder="$t('developer.debug_device.model_code')"
            clearable
            @blur="() => (modelCode = modelCode.trim())"
            @keyup.enter.native="search((pageIndex = 1))"
          />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="status"
            clearable
            :placeholder="$t('developer.debug_device.status')"
          >
            <template #empty> <div /></template>
            <el-option
              v-for="item in statusArray"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="w-8" @click="search((pageIndex = 1))">
            <svg-icon icon-class="search" class="text-lg" />
          </el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="listLoading" :data="debugDeviceData" stripe>
        <el-table-column
          :label="$t('developer.debug_device.developer_name')"
          prop="developerName"
        />
        <el-table-column
          :label="$t('developer.debug_device.apply_batch_no')"
          prop="deviceApplyBatchNo"
        />
        <el-table-column
          :label="$t('developer.debug_device.model_code')"
          prop="modelCode"
        />
        <el-table-column :label="$t('developer.debug_device.dev_sn')" prop="devSn" />
        <el-table-column
          :label="$t('developer.debug_device.apply_time')"
          prop="applyTime"
          width="200px"
        >
          <template v-slot="{ row }">
            <div :title="timeFilter(row.applyTime)">
              {{ dateFilter(row.applyTime) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('developer.debug_device.status')"
          prop="status"
          width="150px"
        >
          <template v-slot="{ row }">
            <el-tag v-if="row.status === 0" size="small" type="warning">{{
              statusFilter(row.status)
            }}</el-tag>
            <el-tag v-if="row.status === 1" size="small" type="success">{{
              statusFilter(row.status)
            }}</el-tag>
            <el-tag v-if="row.status === 2" size="small" type="private">{{
              statusFilter(row.status)
            }}</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column min-width="95px" :label="$t('common.operate')">
          <template v-slot="scope">
            <el-button type="text" size="small" @click="detail(scope.row)">{{
              $t('common.detail')
            }}</el-button>
            <el-button
              v-if="scope.row.status === 0 && isAuth('10400408.MANAGE')"
              type="text"
              size="small"
              @click="showSendDialog(scope.row.developerDeviceId)"
              >{{ $t('developer.debug_device.send') }}</el-button
            >
          </template>
        </el-table-column> -->
        <el-table-column width="75px">
          <template v-slot="scope">
            <el-dropdown class="align-middle" trigger="click">
              <el-button text class="w-8">
                <svg-icon icon-class="MoreFilled" />
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="detail(scope.row)">
                    {{ $t("common.detail") }}
                  </el-dropdown-item>
                  <el-dropdown-item
                    v-if="scope.row.status === 0 && isAuth('10400408.MANAGE')"
                    @click="showSendDialog(scope.row.developerDeviceId)"
                  >
                    {{ $t("developer.debug_device.send") }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      :title="$t('developer.debug_device.send')"
      v-model="sendDialogVisible"
      width="600px"
    >
      <el-form ref="dataForm" :model="dataForm" label-position="top" :rules="rules">
        <el-form-item :label="$t('developer.debug_device.dev_sn') + ':'" prop="devSn">
          <el-input
            v-model="dataForm.devSn"
            :maxlength="32"
            show-word-limit
            @blur="() => (dataForm.devSn = dataForm.devSn.trim())"
          />
        </el-form-item>
        <el-form-item :label="$t('developer.debug_device.logistics_name') + ':'">
          <el-input
            v-model="dataForm.logisticsName"
            :maxlength="128"
            show-word-limit
            @blur="() => (dataForm.logisticsName = dataForm.logisticsName.trim())"
          />
        </el-form-item>
        <el-form-item :label="$t('developer.debug_device.logistics_no') + ':'">
          <el-input
            v-model="dataForm.logisticsNo"
            :maxlength="128"
            show-word-limit
            @blur="() => (dataForm.logisticsNo = dataForm.logisticsNo.trim())"
          />
        </el-form-item>
        <el-form-item :label="$t('developer.debug_device.ota_type') + ':'" prop="otaType">
          <!--          <el-input v-model="dataForm.otaType"></el-input>-->
          <el-select v-model="dataForm.otaType" class="w-full">
            <el-option
              v-for="otaType in otaTypeList"
              :key="otaType.val"
              :value="otaType.val"
              :label="otaType.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('developer.debug_device.ota_version') + ':'"
          prop="otaVersion"
        >
          <el-input
            v-model="dataForm.otaVersion"
            :maxlength="64"
            show-word-limit
            @blur="() => (dataForm.otaVersion = dataForm.otaVersion.trim())"
          />
        </el-form-item> </el-form
      ><template #footer>
        <span class="dialog-footer">
          <el-button text @click="sendDialogVisible = false">{{
            $t("common.cancel")
          }}</el-button>
          <el-button type="primary" :loading="sendDeviceLoading" @click="send()">{{
            $t("developer.debug_device.send")
          }}</el-button>
        </span></template
      >
    </el-dialog>
    <device-detail-drawer
      v-if="deviceDetailDrawerVisible"
      ref="deviceDetailDrawer"
      v-model="deviceDetailDrawerVisible"
      size="800px"
    />
  </div>
</template>

<script>
import { timeFilter, dateFilter } from "@/filters";
import { approveDeviceApply, getDeviceList, sendDevice } from "@/api/developer-device";
import DeviceDetailDrawer from "./components/device-detail-drawer";
import { isAuth } from "@/utils";
import PageTitle from "@/components/PageTitle/index.vue";
export default {
  components: {
    DeviceDetailDrawer,
    PageTitle,
  },
  props: {},
  data() {
    return {
      listLoading: false,
      deviceDetailDrawerVisible: false,
      developerName: "",
      devSn: "",
      modelCode: "",
      status: "",
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      debugDeviceData: [],
      sendDialogVisible: false,
      sendDeviceLoading: false,
      sendDeveloperDeviceId: "",
      dataForm: {
        devSn: "",
        logisticsName: "",
        logisticsNo: "",
        otaType: 1,
        otaVersion: "",
      },
      otaTypeList: [
        { val: 1, label: "DEV" },
        { val: 2, label: "PROD" },
      ],
    };
  },
  computed: {
    rules() {
      return {
        devSn: [
          {
            required: true,
            message: this.$t("developer.debug_device.rule_tip.dev_sn"),
            trigger: "blur",
          },
        ],
        // logisticsName: [
        //   {
        //     required: true,
        //     message: this.$t('developer.debug_device.rule_tip.logistics_name'),
        //     trigger: 'blur'
        //   }
        // ],
        // logisticsNo: [
        //   {
        //     required: true,
        //     message: this.$t('developer.debug_device.rule_tip.logistics_no'),
        //     trigger: 'blur'
        //   }
        // ],
        otaVersion: [
          {
            required: true,
            message: this.$t("developer.debug_device.rule_tip.ota_version"),
            trigger: "blur",
          },
        ],
      };
    },
    statusArray() {
      return [
        {
          label: this.$t("developer.debug_device.device_status_list.wait_for_send"),
          value: 0,
        },
        {
          label: this.$t("developer.debug_device.device_status_list.send"),
          value: 1,
        },
      ];
    },
  },
  mounted() {
    this.search();
  },
  methods: {
    timeFilter,
    dateFilter,
    search() {
      this.listLoading = true;
      getDeviceList({
        pageNo: this.pageIndex,
        pageSize: this.pageSize,
        developerName: this.developerName,
        devSn: this.devSn,
        modelCode: this.modelCode,
        status: this.status,
      })
        .then((res) => {
          if (res) {
            this.listLoading = false;
            this.debugDeviceData = res.data;
            this.totalPage = res.rows;
          }
        })
        .catch((e) => {
          this.$confirmError(e);
          this.listLoading = false;
          console.log(`err:${JSON.stringify(e)}`);
        });
    },
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.search();
    },
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.search();
    },
    detail(developerDevice) {
      this.deviceDetailDrawerVisible = true;
      this.$nextTick(() => {
        this.$refs.deviceDetailDrawer.init(developerDevice);
      });
    },
    showSendDialog(developerDeviceId) {
      this.sendDialogVisible = true;
      this.sendDeveloperDeviceId = developerDeviceId;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
      });
    },
    send() {
      this.$confirm(this.$t("developer.debug_device.title.send"), "", {
        confirmButtonText: this.$t("common.confirm"),
        cancelButtonText: this.$t("common.cancel"),
        type: "primary",
      }).then(() => {
        this.sendDeviceLoading = true;
        sendDevice({
          developerDeviceId: this.sendDeveloperDeviceId,
          logisticsName: this.dataForm.logisticsName,
          logisticsNo: this.dataForm.logisticsNo,
          devSn: this.dataForm.devSn,
          otaType: this.dataForm.otaType,
          otaVersion: this.dataForm.otaVersion,
        })
          .then((data) => {
            if (data) {
              this.$message.success(this.$t("common.operate_success"));
              this.sendDeviceLoading = false;
              this.sendDialogVisible = false;
              this.search();
            }
          })
          .catch((e) => {
            this.$confirmError(e);
            this.sendDeviceLoading = false;
            console.log(`err:${JSON.stringify(e)}`);
          });
      });
    },
    statusFilter(status) {
      const statusMap = {
        0: this.$t("developer.debug_device.device_status_list.wait_for_send"),
        1: this.$t("developer.debug_device.device_status_list.send"),
        2: this.$t("developer.debug_device.device_status_list.receipted"),
      };
      return statusMap[status];
    },
    isAuth,
  },
};
</script>

<style lang="scss" scoped></style>
